<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let province=[]//初始化所有的省份信息
			function init(){
				// 1.创建核心对象
				let xhr=new XMLHttpRequest()
				// 2.创建请求
				xhr.open("GET","city.json",false)//false表示同步
				// 3.发送请求
				xhr.send()
				// 4.接收、解析、显示数据
				let data=xhr.responseText //以文本的方式接收JSON,变成一个JSON的串
				province=JSON.parse(data)//将JSON串转换为数组
				// 将所有的省份的名字添加到s1的下拉列表中
				for (let i = 0; i < province.length; i++) {
					// 将第i个省的名字添加到s1的第i个选项中
					s1.options[i]=new Option(province[i].name)
				}
				for (let i = 0; i < province[0].cities.length; i++) {
					// 将第i个省的名字添加到s1的第i个选项中
					s2.options[i]=new Option(province[0].cities[i])
				}
				function change(){
					let index=s1.selectedIndex
					for (let i = 0; i < prvinces.cities.length; i++) {
						s2.options[i]= Option(prvinces[index].cities[i])
					}
				}
			}
		</script>
	</head>
	<body onload="init()">
		请选择:<select id="s1" onchange="change()"></select>省
		<select id="s2"></select>市
		<script type="text/javascript">
			const s1=document.querySelector("#s1")
			const s2=document.querySelector("#s2")
		</script>
	</body>
</html>
